<template>
  <div class="login-container">

    <div class="login-box">
      <img src="../assets/logo.jpg" alt="Logo" class="logo">
      <h2 class="login-title">登录</h2>
      <form @submit.prevent="handleLogin" class="login-form">
        <div class="form-group">
          <label for="username" class="form-label">用户名</label>
          <input type="text" id="username" v-model="username" class="form-input" required>
        </div>
        <div class="form-group">
          <label for="password" class="form-label">密码</label>
          <input type="password" id="password" v-model="password" class="form-input" required>
        </div>
        <button type="submit" class="login-button">登录</button>
      </form>
    </div>
  </div>
</template>

<script>
import request from "@/utils/request";  // 确保在你的项目中有此模块，处理axios实例化和配置

export default {
  name: 'UserLogin',
  data() {
    return {
      username: '',
      password: '',
      currentUser: null // 用于存储当前登录的用户信息
    };
  },
  methods: {
    handleLogin() {
      if (this.username && this.password) {
        console.log('Sending login request');
        request.post('/user/login', {
          username: this.username,
          password: this.password
        })
        .then(response => {
          const user = response.data;
          console.log('Login response:', response);
          console.log(`用户名: ${user.username}`);
          console.log(`用户类型: ${user.userType}`);

          // 保存用户信息到本地状态和localStorage
          this.currentUser = user;
          localStorage.setItem('userType', user.userType); // 保存用户类型到本地存储
          localStorage.setItem('shopId', user.shopId); // 保存商店ID到本地存储

          // 根据用户类型执行相应操作，例如重定向到不同的页面等
          if (user.userType === '02') {
            this.$router.push('/goods');
          } else if (user.userType === '03') {
            this.$router.push('/shop');
          } else {
            this.$router.push('/default-homepage');
          }
        })
        .catch(error => {
          console.error('Login failed with error:', error);
          if (error.response && error.response.status === 401) {
            alert('用户名或密码错误');
          } else {
            alert('登录失败，请稍后再试');
          }
        });
      } else {
        alert('请输入用户名和密码');
      }
    }
  }
}
</script>

<style scoped>
.login-container {
  display: flex;
  justify-content: flex-end;
  padding-right: 100px;
  height: 100vh;
  background-color: #f7f7f7;
  background-image: url('../assets/background.jpg');
}
.logo {
  display: block; /* 使图片成为块级元素，可以更好地控制位置 */
  margin: 0 auto; /* 居中图片 */
  margin-bottom: 20px; /* 在图片和标题之间添加一些空间 */
  max-width: 100%; /* 确保图片不会超出登录框的宽度 */
  width: 150px; /* 设置图片宽度为150像素 */
  height: 150px; /* 设置图片高度为100像素 */
}

.login-box {
  width: 300px;
  padding: 40px;
  background-color: #fff;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
  border-radius: 8px;
}

.login-title {
  text-align: center;
  margin-bottom: 30px;
  color: #333;
}

.login-form {
  display: flex;
  flex-direction: column;
}

.form-group {
  margin-bottom: 20px;
}

.form-label {
  display: block;
  margin-bottom: 5px;
  color: #666;
}

.form-input {
  width: 100%;
  padding: 10px;
  border: 1px solid #ddd;
  border-radius: 4px;
  box-sizing: border-box;
}

.login-button {
  padding: 10px 20px;
  background-color: #007bff;
  color: #fff;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

.login-button:hover {
  background-color: #0056b3;
}
</style>
